﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>数字电路在线模拟</title>
	<link rel="shortcut icon" href="imgs/NOT.gif">
	<link rel="stylesheet" type="text/css" href="css/src/style.css"/>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script type="text/javascript">
	/* Load jQuery from a local file if for some reason it failed to load from the CDN */
	if (typeof jQuery == 'undefined') {
		document.write(unescape("%3Cscript src='scripts/src/jquery-1.8.3.min.js' type='text/javascript'%3E%3C/script%3E"));
	}
	</script>
	<script src="scripts/src/jquery-ui-1.10.3.draggable.min.js" type="text/javascript"></script>
</head>
<body onload="digsim.run()">
	<div class="row header main">&nbsp;</div>
	<div class="menu">
		<div class="col file">
			<ul class="row header">
				<li>文件</li>
			</ul>
			<ul class="row">
				<li>
					<a href="#" class="disabled" tabindex="-1"><div class="button"></div>&nbsp;</a>
				</li>
				<li>
					<a href="#" id="New" title="新建" tabindex="-1"><div class="button New"></div>新建</a>
				</li>
				<li>
					<!--
						IE9 Workaround to submit a file programmatically. Use a label to a <input type="file"> instead of a <a> tag.
						http://jsfiddle.net/djibouti33/uP7A9/
					-->
					<label id="Open" title="打开" tabindex="-1" for="uploadFile"><div class="button Open"></div>打开</label>
					<form id="uploadForm" action="scripts/src/loadFile.php" method="post" enctype="multipart/form-data" runat="server" target="fileContents" tabindex="-1">
						<iframe id="fileContents" name="fileContents" tabindex="-1"></iframe>
						<input type="file" name="file" id="uploadFile" tabindex="-1">
					</form>
				</li>
				<li>
					<a href="#" id="Save" title="保存" tabindex="-1"><div class="button Save"></div>保存</a>
				</li>
			</ul>
			<ul class="row">
				<li>
					<a href="#" class="disabled" tabindex="-1"><div class="button"></div>&nbsp;</a>
				</li>
				<li>
					<a href="#" id="Toggle_Grid" title="网格切换" tabindex="-1"><div class="button Toggle_Grid"></div>网格</a>
				</li>
				<li>
					<a href="#" id="Zoom_Out" title="放大" tabindex="-1"><div class="button Zoom_Out"></div>放大</a>
				</li>
				<li>
					<a href="#" id="Zoom_In" title="缩小" tabindex="-1"><div class="button Zoom_In"></div>缩小</a>
				</li>
			</ul>
		</div>
		<div class="col gates">
			<ul class="row header">
				<li>门/基础电路单元</li>
			</ul>
			<!-- The id attribute of each button MUST match the class name of the object it creates. -->
			<ul class="row">
				<li>
					<a href="#" id="AND" title="AND" tabindex="-1"><div class="button AND"></div>与门</a>
				</li>
				<li>
					<a href="#" id="OR" title="OR" tabindex="-1"><div class="button OR"></div>或门</a>
				</li>
				<li>
					<a href="#" id="NOT" title="NOT" tabindex="-1"><div class="button NOT"></div>非门</a>
				</li>
				<li>
					<a href="#" id="DFF" title="DFF" tabindex="-1"><div class="button DFF"></div>D触发器</a>
				</li>
				<li>
					<a href="#" id="PROM" title="PROM" tabindex="-1"><div class="button PROM"></div>PROM</a>
				</li>
                <li class="num-inputs">
                    <a href="#" class="disabled" tabindex="-1"><div class="button"></div></a>
                </li>
			</ul>
			<ul class="row">
				<li>
					<a href="#" id="NAND" title="NAND" tabindex="-1"><div class="button NAND"></div>与非门</a>
				</li>
				<li>
					<a href="#" id="NOR" title="NOR" tabindex="-1"><div class="button NOR"></div>或非门</a>
				</li>
				<li>
					<a href="#" id="XOR" title="XOR" tabindex="-1"><div class="button XOR"></div>异或门</a>
				</li>
				<li>
					<a href="#" id="MUX" title="MUX" tabindex="-1"><div class="button MUX"></div>多路选择器</a>
				</li>
				<li class="num-inputs">
                    <a href="#" class="disabled" tabindex="-1"><div class="button"></div></a>
                </li>
			</ul>
			<div class="input-col">
		        <ul class="num-inputs input-list">
		            <li>输入数量</li>
		            <li><a href="#" id="2-input" title="2 输入" class="active" data-inputs="2" tabindex="-1">2</a></li>
		            <li><a href="#" id="3-input" title="3 输入" data-inputs="3" tabindex="-1">3</a></li>
		            <li><a href="#" id="4-input" title="4 输入" data-inputs="4" tabindex="-1">4</a></li>
		        </ul>
		    </div>
		</div>
		<div class="col io">
			<ul class="row header">
				<li>I/O</li>
			</ul>
			<!-- The id attribute of each button MUST match the class name of the object it creates. -->
			<ul class="row">
				<li>
					<a href="#" id="Switch" title="开关" tabindex="-1"><div class="button Switch"></div>开关</a>
				</li>
				<li>
					<a href="#" id="Clock" title="时钟" tabindex="-1"><div class="button Clock"></div>时钟</a>
				</li>
			</ul>
			<ul class="row">
				<li>
					<a href="#" id="LED" title="LED" tabindex="-1"><div class="button LED"></div>LED</a>
				</li>
				<li>
					<a href="#" id="ASCIIDisplay" title="ASCII显示" tabindex="-1"><div class="button ASCIIDisplay"></div>ASCII显示</a>
				</li>
			</ul>
		</div>
		<div class="col modes">
			<!-- The id attribute of each button MUST match the class name of the object it creates. -->
			<ul class="row header">
				<li>模式</li>
			</ul>
			<ul class="row">
				<li>
					<a href="#" id="Wire" title="连线" tabindex="-1"><div class="button Wire"></div>连线</a>
				</li>
			</ul>
			<ul class="row">
				<li>
					<a href="#" id="Run" title="运行" tabindex="-1"><div class="button Run"></div>运行</a>
				</li>
			</ul>
		</div>
		<div class="col controls">
			<ul class="row header">
				<li>编辑</li>
			</ul>
			<ul class="row">
				<li>
					<a href="#" id="Delete" title="删除" tabindex="-1"><div class="button Delete"></div>删除</a>
				</li>
				<li>
					<a href="#" id="Rotate_CCW" title="向左旋转" tabindex="-1"><div class="button Rotate_Left"></div>向左旋转</a>
				</li>
				<li>
					<a href="#" id="Rotate_CW" title="向右旋转" tabindex="-1"><div class="button Rotate_Right"></div>向右旋转</a>
				</li>
			</ul>
			<ul class="row">
				<li>
					<a href="#" id="Cut" title="剪切" tabindex="-1"><div class="button Cut"></div>剪切</a>
				</li>
				<li>
					<a href="#" id="Copy" title="复制" tabindex="-1"><div class="button Copy"></div>复制</a>
				</li>
				<li>
					<a href="#" id="Paste" title="粘贴" tabindex="-1"><div class="button Paste"></div>粘贴</a>
				</li>
			</ul>
		</div>
	</div>
	<div class="messages">
		<ul class="col header">
			<li class="row">Messages</li>
		</ul>
		<div id="messages"></div>
	</div>
	<div class="canvases">
		<canvas id="grid">
			Your browser does not support HTML5 canvas element. Please try again with a different browser.
		</canvas>
		<canvas id="static"></canvas>
		<canvas id="moving"></canvas>
	</div>
	<div class="component-menu">
		<div id="component-name"></div>
		<div class="component-inputs">
			<p>
				<label for="component-label">Label:</label>
				<input type="text" name="label" id="component-label" autocomplete="off"/>
			</p>
			<div class="clock-freq">
				<p>
					<label for="clock-freq">Frequency:</label>
					<input type="text" name="clock" id="clock-freq" maxlength="3" size="3" autocomplete="off"/>&nbsp;Hz.
				</p>
			</div>
			<div class="prom-addresses">
				<table id="prom-addresses">
				</table>
			</div>
		</div>
		<div class="component-options">
			<a href="#" class="save" id="component-save">Save</a>
			<a href="#" class="cancel" id="component-cancel">Cancel</a>
		</div>
	</div>
    <script type="text/javascript" src="scripts/src/componentList.js"></script>
    <script type="text/javascript" src="scripts/src/application.js"></script>
    <script type="text/javascript" src="scripts/src/component.js"></script>
    <script type="text/javascript" src="scripts/src/and-gate.js"></script>
	<script type="text/javascript" src="scripts/src/wire.js"></script>
	<script type="text/javascript" src="scripts/src/switch.js"></script>
	<script type="text/javascript" src="scripts/src/led.js"></script>
	<script type="text/javascript" src="scripts/src/nand-gate.js"></script>
	<script type="text/javascript" src="scripts/src/nor-gate.js"></script>
	<script type="text/javascript" src="scripts/src/not-gate.js"></script>
	<script type="text/javascript" src="scripts/src/or-gate.js"></script>
	<script type="text/javascript" src="scripts/src/xor-gate.js"></script>
	<script type="text/javascript" src="scripts/src/clock.js"></script>
	<script type="text/javascript" src="scripts/src/dff.js"></script>
	<script type="text/javascript" src="scripts/src/mux.js"></script>
	<script type="text/javascript" src="scripts/src/prom.js"></script>
	<script type="text/javascript" src="scripts/src/ascii-display.js"></script>
</body>
</html>
